<template>
  <div>
    <p>商品清单如下:</p>
    <p v-for="(obj,index) in arr" :key="index" >
        <span>{{obj.shopName}}</span>--
        <span>{{obj.price}}元一份</span>
    </p>
    <p>请选择购买的数量:</p>
     <num v-for="(item,index) in arr"
     :key="index"
     :goodsName="item.shopName"
     :count="item.count"
     :ind="index"
     @adds="add"
     @dels="del"
    ></num>
    <p>总价为:{{allPrice}}</p>
  </div>
</template>

<script>
import num from "./components/作业6"
export default {
    components: {
        num
    },
  data() {
    return {
      arr: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
    };
  },
methods: {
    add(ind){
        this.arr[ind].count++
    },
    del(ind){
        if(this.arr[ind].count >0){
            this.arr[ind].count--
        }else{
            this.arr[ind].count = 0
        }
    }
},
computed: {
    allPrice(){
       return this.arr.reduce((sum,obj) => sum += obj.count * obj.price,0)
    }
}
};
</script>

<style>
</style>